<script setup lang="ts">
import type { couponListItem } from '@/types/coupon'
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    couponList: couponListItem[]
    buttonTitle: string
    mode?: 'center' | 'user'
    timeTitle?: string
  }>(),
  {
    mode: 'center',
    timeTitle: '',
  },
)

enum couponStatus {
  toUse = 1,
  used = 2,
  expired = 3,
}

const getDiscountType = (type: number) => {
  switch (type) {
    case 1:
      return '满减券'
    case 2:
      return '折扣券'
  }
}

const getRangeType = (type: number) => {
  switch (type) {
    case 1:
      return '全品类'
    case 2:
      return '限品类'
  }
}

const getTime = (time: number) => {
  const date = new Date(time * 1000)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')

  return `${year}-${month}-${day}`
}

const getFormattedTime = (time: number) => {
  const date = new Date(time * 1000)
  const now = new Date()
  const isSameDay = date.toDateString() === now.toDateString()

  if (isSameDay) {
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${getTime(time)} ${hours}:${minutes}:${seconds}`
  }

  return getTime(time)
}

const toggleCouponDesc = (item: any) => {
  item.expanded = !item.expanded
}

const emits = defineEmits<{
  (event: 'button-clicked', item: couponListItem): void
}>()

const buttonClicked = (item: couponListItem) => {
  emits('button-clicked', item)
}

const getStatusIcon = computed(() => (item: any) => {
  if (item.used) {
    return '/static/images/used.png'
  }
  if (item.expired) {
    return '/static/images/expiried.png'
  }
  if (item.ran_out) {
    return '/static/images/ran_out.png'
  }
  if (item.received) {
    return '/static/images/received.png'
  }
  if (item.ended) {
    return '/static/images/ended.png'
  }
  if (item.invalid) {
    return '/static/images/invalid.png'
  }
})
</script>

<template>
  <view v-if="props.couponList.length > 0">
    <view
      v-for="(item, index) in props.couponList"
      :key="index"
      class="coupon_box"
      :class="{ 'coupon-disabled': item.disabled }"
    >
      <view class="left">
        <view class="left_top">
          <text class="name ellipsis">{{ item.name }}</text>
        </view>
        <view class="coupon-type">{{ getDiscountType(item.discount_type) }}</view>
        <view class="left_bottom">
          <text v-if="props.mode == 'center'">
            <text v-if="item.expiry_type == 1">
              {{ props.timeTitle }} {{ getTime(item.start_time) }}~{{ getTime(item.end_time) }}
            </text>
            <text v-else-if="item.expiry_type == 2">领取后{{ item.expiry_days }}天内有效</text>
          </text>
          <text v-else-if="props.mode == 'user'">
            <text>有效期至 {{ getFormattedTime(item.end_time) }}</text>
          </text>
        </view>
      </view>

      <image :src="getStatusIcon(item)" class="use-icon" />

      <view
        class="right"
        :style="'background:' + (item.status == couponStatus.toUse ? 'red' : '')"
        @tap="buttonClicked(item)"
      >
        <view class="money" v-if="item.discount_type == 1">
          ￥{{ parseFloat(item.discount_amount).toFixed(0) }}
        </view>
        <view class="money" v-else-if="item.discount_type == 2">
          {{ (parseFloat(item.discount_ratio) * 10).toFixed(0) }} 折
        </view>
        <text>满{{ parseFloat(item.min_price).toFixed(1) }}元可用</text>
        <!-- 按钮 -->
        <view class="use" :style="{ color: 'red' }" v-if="!item.disabled">
          {{ props.buttonTitle }}
        </view>
      </view>

      <view class="bottom-line" />

      <view @tap="toggleCouponDesc(item)" v-if="props.mode != 'center' && !item.disabled">
        <view class="coupon-desc" style="padding-bottom: 15rpx">
          <text class="text">使用说明</text>
          <uni-icons
            :type="(item.expanded ? 'up' : 'down' as any)"
            size="12"
            class="icon"
            color="#888"
          />
        </view>
        <view class="desc-block" v-if="item.expanded">
          <view>抵扣说明：优惠券最多抵扣至0.01元且不能抵扣运费</view>
          <text>{{ getRangeType(item.range_type) }}券：{{ item.name }}</text>
          <view v-if="item.desc">使用规则：{{ item.desc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.coupon_box {
  margin: 20rpx;
  box-shadow: 0rpx 0rpx 10rpx #ddd;
  position: relative;
  border-radius: 10rpx;
  overflow: hidden;
  background: linear-gradient(to right, #ffffff, #f2f2f2);
  border: 2px solid #ddd;
}

.coupon_box .left {
  width: 70%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20rpx 0 0 20rpx;
  float: left;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.coupon_box .left .left_top {
  width: 60vw;
  display: block;
  font-size: 26rpx;
  font-weight: bold;
}

.left_top .name {
  height: 70rpx;
  margin-left: 60rpx;
}

.left_bottom {
  font-size: 24rpx;
  font-weight: bold;
  color: #888;
  height: 60rpx;
  line-height: 60rpx;
}

.coupon_box .right {
  text-align: center;
  height: 210rpx;
  width: 200rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  float: right;
  background-color: #ff6347;
  border-radius: 10rpx 0 0 10rpx;
}

.coupon_box .right .use {
  height: 40rpx;
  line-height: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 20rpx;
  margin-top: 15rpx;
  width: 120rpx;
  font-size: 20rpx;
}

.coupon_box .right .money {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
}

.coupon_box .right text {
  font-size: 20rpx;
  color: #fff;
  height: 40rpx;
  line-height: 34rpx;
}

.coupon_box .bottom {
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  align-content: flex-start;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.coupon_box .bottom view {
  margin-right: 20rpx;
  color: #888;
  font-weight: bold;
}

.use-icon {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 40rpx;
  right: 200rpx;
}
.bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.coupon-desc {
  margin-left: 20rpx;
  .text {
    font-size: 22rpx;
    color: #888;
  }
}
.desc-block {
  padding: 20rpx;
  border-top: 1px solid #ddd;
  font-size: 20rpx;
  color: #888;
  line-height: 1.2rem;
}
.coupon-type {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 10;
  width: 130rpx;
  padding: 5rpx 0;
  font-size: 20rpx;
  text-align: center;
  color: #ffffff;
  transform: rotate(-45deg);
  transform-origin: 64rpx 64rpx;
  background: #ff6347;
  transform-origin: 70rpx 70rpx;
}

.coupon-disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  pointer-events: none;
}
</style>
